<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
  <title>链上善行登录</title>
  <link href="common/favicon1.png" rel="shortcut icon" type="image/png">
  <link rel="stylesheet" href="background/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="background/modules/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="background/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

  <link rel="stylesheet" href="background/css/demo.css">
  <link rel="stylesheet" href="background/css/style.css">
  <style>
    .itema{
      margin-top: 10px;
      font-weight: bold;
    }
    .notification-btn {
      border: none;
      background-color: transparent;
    }

    .notification {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 999;
      padding: 10px 20px;
      border-radius: 5px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.3s ease-in-out;
    }

    .notification.show {
      opacity: 1;
      transform: translateY(0);;
    }

    .notification.success {
      background-color: #e1f3d8;
      color: #4caf50;
    }

    .notification.warning {
      background-color: #fffbe6;
      color: #ffca28;
    }

    .notification.info {
      background-color: #e6f7ff;
      color: #2196f3;
    }

    .notification.error {
      background-color: #ffebee;
      color: #f44336;
    }
  </style>
</head>

<body>
<div id="app">
  <section class="section">
    <div class="container mt-5">
      <div class="row">
        <div class="col-12 col-sm-8 offset-sm-2 col-md-6 offset-md-3 col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
          <div class="login-brand">
            链上善行-用户登录
          </div>

          <div class="card card-primary">
            <div class="card-header"><h4>登录</h4></div>

            <div class="card-body">
              <form class="needs-validation" novalidate="">
                <div class="form-group">
                  <label for="email">邮箱</label>
                  <input id="email" type="email" class="form-control" name="email" tabindex="1" required autofocus>
                  <div class="invalid-feedback">
                    请输入您的邮箱
                  </div>
                </div>

                <div class="form-group">
                  <label for="password" class="d-block">密码
                    <div class="float-right">
                      <a href="forget-password">
                        忘记密码?
                      </a>
                    </div>
                  </label>
                  <input id="password" type="password" class="form-control" name="password" tabindex="2" required>
                  <div class="invalid-feedback">
                    请输入您的密码
                  </div>
                </div>
                <font style="color: red;"><span th:text="${errorMsg}"></span></font>
                <br><br>
                <div class="form-group">
                  <button type="submit" class="btn btn-primary btn-block" tabindex="4" style="border-width: 0px">
                    登录
                  </button>
                </div>
              </form>
            </div>
          </div>
          <div class="mt-5 text-muted text-center">
            没有账户? <a href="register-page">点击注册</a>
          </div>
          <div class="simple-footer">
            Copyright &copy; <a href="index">链上善行公益平台</a> 2024
          </div>
        </div>
      </div>
      <div id="notifications4" style=""></div>
      <button id="error_not" className="notification-btn error" onClick="openError()" style="display: none">错误</button>
    </div>
  </section>
</div>

<script src="background/modules/jquery.min.js"></script>
<script src="background/modules/popper.js"></script>
<script src="background/modules/tooltip.js"></script>
<script src="background/modules/bootstrap/js/bootstrap.min.js"></script>
<script src="background/modules/nicescroll/jquery.nicescroll.min.js"></script>
<script src="background/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
<script src="background/js/sa-functions.js"></script>
<script src="background/js/scripts.js"></script>
<script src="background/js/custom.js"></script>
<script>
  function extractPathAndQueryAfterLoveCharity(urlString) {
    const url = new URL(urlString);
    const loveCharityIndex = url.pathname.indexOf('/blockchain-kindness/') + '/blockchain-kindness/'.length;
    const pathAndQueryAfterLoveCharity = url.pathname.slice(loveCharityIndex) + url.search;
    return pathAndQueryAfterLoveCharity;
  }
  $(document).ready(function() {
    // 选择器选择登录表单
    var loginForm = $('form.needs-validation');
    // 监听表单提交事件
    loginForm.submit(function(event) {
      event.preventDefault(); // 阻止默认提交行为
      // window.location.href = "/blockchain-kindness/admin-project";
      // 获取当前表单数据
      var formData = $(this).serializeArray();
      var url = localStorage.getItem('url');
      url = extractPathAndQueryAfterLoveCharity(url);
      var newKeyValuePair = {
        name: 'url',// 将'yourNewKey'替换为您想要添加的键名
        value: url,
      };
      formData.push(newKeyValuePair);
      var data = {};
      for (var i = 0; i < formData.length; i++) {
        var item = formData[i];
        data[item.name] = item.value;
      }
      $.ajax(({
        url: "login",
        type : "POST",
        contentType: "application/json", // 添加此行
        data :JSON.stringify({
          "email" : data['email'],
          "password" : data['password'],
          "url" : data['url'],
        }),
        success(resp){
          if(resp.message === '登录成功'){
            if(resp.data === 1){
              window.location.href = "/blockchain-kindness/DataDetail";
            }else{
              window.location.href = "/blockchain-kindness/" + url;
            }
          }
          if(resp.message === '账号或密码错误'){
            var element = document.querySelector('#error_not');
            element.click();
          }
        }
      }))

    });
  });
  function createNotification(type, title, message) {
    const notificationDiv = document.createElement('div');
    notificationDiv.classList.add('notification', type, 'show');

    const titleElement = document.createElement('strong');
    titleElement.textContent = title;
    notificationDiv.appendChild(titleElement);

    const messageElement = document.createElement('p');
    messageElement.textContent = message;
    notificationDiv.appendChild(messageElement);
    const notificationsContainer = document.getElementById('notifications4');
    notificationsContainer.appendChild(notificationDiv);

    setTimeout(() => {
      notificationDiv.classList.remove('show');
      setTimeout(() => {
        notificationsContainer.removeChild(notificationDiv);
      }, 300);
    }, 3000);
  }

  function openSuccess() {
    createNotification('success', '感谢您的善心，感谢您的相伴');
  }

  function openWarning() {
    createNotification('warning', '警告', '这是一条警告的提示消息');
  }

  function openInfo() {
    createNotification('info', '消息', '这是一条消息的提示消息');
  }

  function openError() {
    createNotification('error', '错误', '您输入的账号或密码错误，请重新输入');
  }

</script>
</body>
</html>